<template>
  <div class="common-body-wrapper">
    <search-header
      single-width="130"
      :searchList="searchList"
      @changeHeight="toRetTable"
      @confirmSearch="toSearch"
      @handleChange="handleSearchChange"
      :isCheckbox="true"
      :isNeedTree="true"
      :paramName="paramName"
      @setSelectedNode="setSelectedNode"
    ></search-header>

    <div class="common-table-tree-wrapper">
      <!-- <table-tree :isCheckbox="false" :isNeedTree="isNeedTree" :paramName="paramName" @toggleTreeBox="toggleTreeBox" @setSelectedNode="setSelectedNode" @searchFn="getList">
      </table-tree>-->

      <div class="common-table-wrapper" v-if="isShowTable">
        <multi-fun-table
          :sortColumn="notFormatColumn"
          :orderType="sortType"
          :fixed-cols="fixedCols"
          :is-reset-table="isResetTable"
          :theads-info="theadsInfo"
          :tbodys-info="tbodysInfo"
          @handleMultiCheck="handleMultiCheck"
          @handleSortColumn="handleSortColumn"
          @searchFn="getList"
          @getNextPage="getNextPage"
        >
          <div class="operate-btn-group" slot="operateBtnGroup">
            <a
              class="ake_btn ake_btn_text"
              v-if="isPermmited('REPORT:TMP_CHARGE:EXPORT')"
              @click.prevent="ManageCostModal_open()"
            >管理费设置</a>
            <a
              class="ake_btn ake_btn_text"
              v-if="isPermmited('MONTH:TICKET:FINANCE:REBUILD')"
              @click.prevent="reBuild()"
            >重新生成</a>
          </div>

          <!--普通列-->
          <template slot="tdCell" slot-scope="props">
            <el-table-column v-if="props.isMultiHeader" :label="props.label" align="center">
              <template v-for="(item, index) in props.children">
                <el-table-column
                  v-if="item.checked"
                  :key="index"
                  :label="item.text"
                  :min-width="item.minWidth"
                  :width="item.width"
                  :prop="item.prop"
                  :sortable="item.sortable"
                >
                  <template slot-scope="scope">
                    <span
                      v-if="'payOriginValue' == props.prop"
                    >{{ scope.row[item.prop] |formatMoney }}</span>
                    <span
                      v-else-if="'realValue' == props.prop"
                    >{{ scope.row[item.prop] |formatMoney }}</span>
                    <span
                      v-else-if="'couponValue' == props.prop"
                    >{{ scope.row[item.prop] |formatMoney }}</span>
                    <span v-else-if="'accountTotalValue' == props.prop && scope.row[props.prop]!=0">
                      <a
                        class="imgLink"
                        @click.prevent="accountShowModal(scope.row)"
                      >{{ scope.row[props.prop] |formatMoney}}</a>
                    </span>
                    <span
                      v-else-if="'accountTotalValue' == props.prop && scope.row[props.prop]==0"
                    >{{ scope.row[props.prop] |formatMoney}}</span>
                    <span v-else>{{ scope.row[item.prop]}}</span>
                  </template>
                </el-table-column>
              </template>
            </el-table-column>

            <el-table-column
              v-else
              :fixed="props.fixed"
              :label="props.label"
              :min-width="props.minWidth"
              :width="props.width"
              :prop="props.prop"
              :sortable="props.sortable"
            >
              <template slot-scope="scope">
                <span v-if="'reno' == props.prop">{{ scope.$index+1 }}</span>
                <span v-else-if="'payParkValue' == props.prop && searchParams.timeDim=='DATE'">
                  <a
                    class="imgLink"
                    @click="payParkValueModal_open(scope.$index)"
                  >{{scope.row[props.prop] | formatMoney}}</a>
                </span>
                <span
                  v-else-if="'totalHandingCharge' == props.prop"
                >{{ scope.row[props.prop] |formatMoney}}</span>
                <span
                  v-else-if="'shouldValue' == props.prop"
                >{{ scope.row[props.prop] |formatMoney}}</span>
                <span v-else-if="'accountTotalValue' == props.prop && scope.row[props.prop]!=0">
                  <a
                    class="imgLink"
                    @click.prevent="accountShowModal(scope.row)"
                  >{{ scope.row[props.prop] |formatMoney}}</a>
                </span>
                <span
                  v-else-if="'accountTotalValue' == props.prop && scope.row[props.prop]==0"
                >{{ scope.row[props.prop] |formatMoney}}</span>
                <span v-else>{{ scope.row[props.prop] }}</span>
              </template>
            </el-table-column>
          </template>
        </multi-fun-table>

        <basic-modal ref="ManageCostModal" static="true" width="800">
          <h3 slot="title">管理费设置</h3>
          <div class="manageCostModalBody" slot="modal-body">
            <el-row class="row-btn">
              <el-button @click="EditManageCostModal_open(1)">新增</el-button>
            </el-row>
            <template>
              <el-table :data="manageCostTableData" border height="200">
                <el-table-column prop="parkName" label="停车场名称"></el-table-column>
                <el-table-column prop="name" label="月票归类"></el-table-column>
                <el-table-column label="月票">
                  <template slot-scope="scope">
                    <el-button @click="EditManageCostModal_open(3,scope.row.id)" type="text">查看</el-button>
                  </template>
                </el-table-column>
                <el-table-column prop="manaCost" label="管理费"></el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button type="text" @click="EditManageCostModal_open(2,scope.row.id)">编辑</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </div>
          <div class="modal-footer" slot="modal-footer">
            <button
              class="ake_btn ake_btn_text ake_btn_confirm"
              @click="closed('ManageCostModal')"
            >确定</button>
            <button class="ake_btn ake_btn_text modal-close" @click="closed('ManageCostModal')">取消</button>
          </div>
        </basic-modal>

        <!-- 新增 编辑 -->
        <basic-modal ref="EditManageCostModal" static="true" width="680">
          <h3 slot="title">{{editTitle}}</h3>
          <div class="editManageCostModalBody" slot="modal-body">
            <el-form
              ref="editManageCost_form"
              :model="EditManageCostModalData"
              :rules="rules"
              label-width="180px"
            >
              <div class="park">
                <el-form-item prop="parkName" label="月票归类所属停车场">
                  <el-input v-model="EditManageCostModalData.parkName" disabled></el-input>
                </el-form-item>
                <el-button
                  :disabled="isLimitEdit"
                  size="small"
                  type="primary"
                  @click="openSelectParkModal"
                  class="select-park-btn ake_btn_text"
                >选择停车场</el-button>
              </div>
              <el-form-item prop="monthlyTicketType" label="月票归类名称">
                <el-input
                  v-model="EditManageCostModalData.monthlyTicketType"
                  :disabled="isLimitEdit"
                ></el-input>
              </el-form-item>
              <el-form-item prop="isChoosedMonthlyTicket" label="选择月票">
                <el-radio-group v-model="EditManageCostModalData.isChoosedMonthlyTicket">
                  <el-radio :disabled="isLimitEdit" :label="0">月票车</el-radio>
                  <el-radio :disabled="isLimitEdit" :label="1">临时车</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item
                prop="inputMonthlyTicketstr"
                v-if="EditManageCostModalData.isChoosedMonthlyTicket==0"
              >
                <el-input
                  type="textarea"
                  v-model="EditManageCostModalData.inputMonthlyTicketstr"
                  disabled
                ></el-input>
                <el-button
                  :disabled="isLimitEdit"
                  size="small"
                  type="primary"
                  @click="openSelectMonthlyTicketModal"
                  class="select-park-btn ake_btn_text choose-month-ticket-btn"
                >选择</el-button>
              </el-form-item>
              <el-form-item prop="manageCost" label="归类管理费(元)">
                <el-input v-model="EditManageCostModalData.manageCost" :disabled="isLimitEdit"></el-input>
              </el-form-item>
            </el-form>
          </div>
          <div class="modal-footer" slot="modal-footer">
            <button
              class="ake_btn ake_btn_text ake_btn_confirm"
              :disabled="isLimitEdit"
              @click="EditManageCostModal_save($event,'editManageCost_form')"
            >确定</button>
            <button
              class="ake_btn ake_btn_text modal-close"
              @click="closed('EditManageCostModal')"
            >取消</button>
          </div>
        </basic-modal>
        <!--选择停车场树-->
        <basic-modal
          ref="selectParkModal"
          width="400"
          customeClass="select-park-modal"
          static="true"
        >
          <h3 slot="title">选择停车场</h3>
          <div class="modal-body" slot="modal-body">
            <div class="common-tree modal-tree-box">
              <ul id="ParkTree" name="ParkTree" class="ztree"></ul>
            </div>
          </div>
          <div class="modal-footer" slot="modal-footer">
            <button
              type="button"
              class="ake_btn ake_btn_text ake_btn_confirm"
              @click="selectParkSure()"
            >确认</button>
            <button class="ake_btn ake_btn_text modal-close" @click="closed('selectParkModal',2)">取消</button>
          </div>
        </basic-modal>
        <!--选择月票列表-->
        <basic-modal
          ref="selectMonthlyTicketModal"
          width="300"
          customeClass="select-park-modal"
          static="true"
        >
          <h3 slot="title">选择月票</h3>
          <div class="modal-body" slot="modal-body">
            <div class="common-tree modal-tree-box">
              <ul id="MonthlyTicketTree" name="MonthlyTicketTree" class="ztree">
                <li v-for="item in monthlyTicketList">
                  <input
                    type="checkbox"
                    :value="item.id"
                    :name="item.ticketName"
                    :checked="EditManageCostModalData.monthlyTicketListStr.indexOf(item.id)!=-1"
                  />
                  {{item.ticketName}}
                </li>
              </ul>
            </div>
          </div>
          <div class="modal-footer" slot="modal-footer">
            <button
              type="button"
              class="ake_btn ake_btn_text ake_btn_confirm"
              @click="selectMonthlyTicketSure()"
            >确认</button>
            <button
              class="ake_btn ake_btn_text modal-close"
              @click="closed('selectMonthlyTicketModal',2)"
            >取消</button>
          </div>
        </basic-modal>
      </div>
    </div>

    <ReBuildBtn ref="myReBuildBtn" :reqUrl="reqUrl" :timeDimensionList="timeDimensionList"></ReBuildBtn>
  </div>
</template>

<script>
import common from "@mixins/common.js";
import stardardList from "@mixins/tables/stardardList.js";

//modal
import invokeModal from "@mixins/modal/invokeModal.js";

// 引进vue的js
import month_ticket_finance_report from "./js/month_ticket_finance_report.js";
import ReBuildBtn from "@components/reBuildBtn/index.vue";
export default {
  mixins: [common, stardardList, invokeModal, month_ticket_finance_report],
  components: {
    ReBuildBtn: ReBuildBtn
  },
  data() {
    var checkNumber = (rule, value, callback) => {
      if (!/^\d+(\.\d+)?$/.test(value)) {
        callback(new Error("请输入0或正整数"));
      } else {
        callback();
      }
    };
    var month = new Date(
      moment()
        .subtract(1, "months")
        .format("YYYY-MM-DD 00:00:00")
    );
    return {
      reqUrl: "/monthTicketFinance/rebuild.do",
      timeDimensionList: [{ name: "月报", value: "month" }],
      fixedCols: 2,
      paramName: "query_parkId",
      searchList: [
        {
          index: 0,
          isShow: false,
          type: "datePicker",
          pickerType: "month",
          format: "yyyy-MM",
          name: "query_chargeDate",
          propName: "query_chargeDateStart,query_chargeDateEnd",
          text: "时间区间",
          value: month,
          style: { width: "185px" }
        },
        {
          index: 1,
          isShow: false,
          type: "select",
          name: "timeDim",
          text: "时间维度",
          value: "MONTH",
          isHandleChange: true,
          options: [
            { name: "月报", value: "MONTH" },
            { name: "年报", value: "YEAR" }
          ]
        }
      ],
      EditManageCostModalData: {
        type: "add",
        parkList: [], //选择的停车场value
        inputParks: [], //选择的停车场name
        monthlyTicketList: [], //选择的月票value
        inputMonthlyTicket: [], //选择的月票name
        id: "", //主键id
        parkUid: "", //停车场uuid
        parkName: "", //选择停车场的名称
        monthlyTicketType: "", //月票归类名称
        isChoosedMonthlyTicket: 0, //是否选择月票
        inputMonthlyTicketstr: "", //选择的月票
        monthlyTicketListStr: "", //选择的月票id
        manageCost: 0 //归类管理费
      },
      rules: {
        parkName: [
          { required: true, message: "请选择停车场", trigger: "change" }
        ],
        monthlyTicketType: [
          { required: true, message: "请填写月票归类名称", trigger: "change" }
        ],
        inputMonthlyTicketstr: [
          { required: true, message: "请选择月票", trigger: "change" }
        ],
        manageCost: [
          { required: true, message: "请填写归类管理费", trigger: "change" },
          { validator: checkNumber, trigger: "change" }
        ]
      },
      monthlyTicketList: [], //月票列表
      theadsInfo: [
        { index: 0, isShow: false, prop: "reno", text: "序号", width: 68 },
        {
          index: 1,
          isShow: false,
          prop: "date",
          text: "时间",
          minWidth: 110
        },
        {
          index: 2,
          isShow: false,
          prop: "parkName",
          text: "停车场",
          minWidth: 130
        },
        {
          index: 3,
          isShow: false,
          text: "收入情况",
          minWidth: 110,
          isMultiHeader: true,
          children: []
        },
        {
          index: 4,
          isShow: false,
          text: "支出情况",
          minWidth: 110,
          isMultiHeader: true,
          children: []
        },
        {
          index: 5,
          isShow: false,
          prop: "realment",
          text: "本月实收",
          minWidth: 110
        }
      ],
      tbodysInfo: []
    };
  }
};
</script>

<style lang="less" scoped>
.row-btn {
  margin: 8px;
}
.manageCostModalBody {
  padding: 0 10px;
  max-height: 300px;
}
.editManageCostModalBody {
  padding: 20px 35px;
  max-height: 480px;
  overflow-y: scroll;
  margin-right: -20px;
  padding-right: 100px;
  .choose-month-ticket-btn {
    margin-top: 10px;
  }
}
.el-button {
  height: 33px;
}
button.el-button.ake_btn.ake_font_btn.ake_btn_text.el-button--primary.el-button--small {
  width: 38px;
}
.park {
  display: flex;
  .el-form-item {
    flex: 1;
    margin-right: 35px;
  }
}

.imgLink {
  color: #337ab7;
  cursor: pointer;
  &:hover {
    color: darkblue;
  }
}

.ztree {
  padding-left: 50px;
  li {
    line-height: 25px;
    input[type="checkbox"] {
      position: relative;
      top: 2px;
      right: 3px;
    }
  }
}
</style>